<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        几个注意点:
            1.关于组件名:
                一个单词组成:
                    第一种写法(首字母小写):school
                    第二种写法(首字母大写):School
                多个单词组成:
                    第一种写法(kebab-case命名):my-school
                    第二种写法(CamelCase命名):MySchool(需要Vue脚手架支持)
                备注:
                    (1).组件名尽可能回避HTML中已有的元素名称，例如: h2、H2都不行。
                    (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

            2.关于组件标签;
                第一种写法:<school></school>
                第二种写法:<school/>
            备注:不用使用脚手架时,<school/>会导致后续组件不能渲染。

            3.一个简写方式:
            const school = Vue.extend(options）可简写为: const school = options 
    -->

    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 编写组件标签 -->
        <school></school>
    </div>
    <script>
        //配置好全局配置之后再创建Vue实例,关闭Vue的生产提示标识
        Vue.config.productionTip = false;
        
        //创建局部组件
        const s=Vue.extend({
            name:'atguigu',
            template: `
                <div>
                    <h2>学校：{{schoolName}}</h2>
                    <h2>地址：{{address}}</h2>
                </div>
            `,
            data() {
                return {
                    schoolName:'尚硅谷',
                    address:'北京'
                }
            }
        });

        var vm = new Vue({
           el:'#app',
           data:{
               msg: '欢迎学习Vue！'
           },
           //注册组件
           components:{
               school:s
           },
           methods:{}
        });
    </script>
</body>

</html>